<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style type="text/css">
			body {
				background-color: #000000;
			}

			img {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div>

		</div>
	</body>
	<script src="../public0.1.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var div = document.querySelector("div")
		console.log(div)
		// 产生一个img的函数
		function showimg() {
			var img = document.createElement("img")
			img.src = "./star.gif";
			img.style.width = img.style.height = rand(0, 20)
			img.style.left = rand(0, window.innerWidth - img.offsetWidth) + "px";
			img.style.top = rand(0, window.innerHeight - img.offsetHeight) + "px";
			document.body.appendChild(img)
		}
		var timeid = setInterval(showimg, 1000)

		// 当点击星星的时候, 星星消失
		document.onclick = function(e) {
			e = e || window.event;
			var target = e.target || e.srcElement;
			console.log(target)
			if (target.nodeName == "IMG") {
				target.remove();
			}
		}
		// 3 页面隐藏的时候停止产生img标签
		// 4 页面显示的时候继续产生img标签
		document.onvisibilitychange = function() {
			if (document.visibilityState == 'hidden') {
				clearInterval(timerid)
			} else {
				timerid = setInterval(showimg, 1000)
			}
		}
	</script>
</html>
